<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<style>
ul.playing-cards {
	margin: 0;
	padding: 0;
}

ul.playing-cards li {
	margin: 0 30px 20px 0;
	padding: 0;
	float: left;
	width: 144px;
	height: 209px;
	list-style-type: none;
	cursor: pointer;
}

ul.playing-cards li .card1.back,ul.playing-cards li .card2.back,ul.playing-cards li .card3.back,ul.playing-cards li .card4.back
	{
	width: 144px;
	height: 209px;
	background: url(images/back.gif) 0 0 no-repeat;
}

ul.playing-cards li .card1 {
	width: 144px;
	height: 209px;
	background: url(images/1.gif) 0 0 no-repeat;
}

ul.playing-cards li .card2 {
	width: 144px;
	height: 209px;
	background: url(images/2.gif) 0 0 no-repeat;
}

ul.playing-cards li .card3 {
	width: 144px;
	height: 209px;
	background: url(images/3.gif) 0 0 no-repeat;
}

ul.playing-cards li .card4 {
	width: 144px;
	height: 209px;
	background: url(images/4.gif) 0 0 no-repeat;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.flip.js"></script>
<body>
	<ul class="playing-cards">
		<li>
			<div class="card1 back"></div>
		</li>
		<li>
			<div class="card2 back"></div>
		</li>
		<li>
			<div class="card4 back"></div>
		</li>
		<li>
			<div class="card3 back"></div>
		</li>
	</ul>
</body>
<!-- https://www.kenmoredesign.com/flip-plugin-for-jquery/-->
</html>